
import React, { memo, useEffect, useState } from 'react';
import ThemeHeaderRcm from '@/components/themeHeaderRcm';
import TopList from '@/components/topRanking';
import * as types from '../../store/constans';
import { reqTopListDetail } from '@/api/toplist';
import { message } from 'antd';

const RecommendRanking = () => {
  const [newRank, setNewRank] = useState([]);
  const [upRank, setUpRank] = useState([]);
  const [originRank, setOriginRank] = useState([]);

  useEffect(() => {
    loadRankAll(types.UP_NUM)
    loadRankAll(types.ORIGIN_NUM)
    loadRankAll(types.NEW_NUM)
  }, [])
  const loadRankAll = (id) => {
    reqTopListDetail(id).then(res => {
      if (res.code !== 200) return;
      switch (id) {
        case types.ORIGIN_NUM:
          setOriginRank(res.playlist);
          return;
        case types.UP_NUM:
          setUpRank(res.playlist);
          return
        case types.NEW_NUM:
          setNewRank(res.playlist);
          return
        default:
          return
      }
    }).catch(() => {
      message.error('请求异常，重试')
    })
  }
  return < >
    <ThemeHeaderRcm title='版单' />
    <div className='rankInfo'>
      <TopList info={originRank} index={2} />
      <TopList info={upRank} index={0} />
      <TopList info={newRank} index={1} />
    </div>
  </>
}
export default memo(RecommendRanking)